
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> 蓝胖子 </title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        width: 800px;
        margin: 50px auto;
        background: #fff;
        position: relative;
    }
    header{
        margin: 0 auto;
        width: 500px;
        height: 440px;
        background: #00b7e7;
        border-radius: 50%;
        border: 1px solid red;
        position: relative;
    }
    .eyeLeft , .eyeRight{
        width: 100px;
        height: 130px;
        border-radius: 50px;
        background: #fff;
        border: 2px solid #000;
        position: absolute;
        top: 50px;
        z-index: 3;
    }
    .eyeLeft{
        left: 146px;
    }
    .eyeRight{
        left: 250px;
    }
    .eyeBallL , .eyeBallR{
        width: 20px;
        height: 20px;
        background: #000;
        border-radius: 50%;
        position: absolute;
        top: 65px;
        z-index: 3;
    }
    .eyeBallL{
        right: 10px;
    }
    .eyeBallR{
        left: 10px;
    }
    .face{
        position: relative;
        z-index: 2;
    }
    .face .white{
        width: 400px;
        height: 320px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 100px;
        left: 50px;
    }
    .face .nose{
        width: 45px;
        height: 50px;
        border-radius: 23px;
        background: #cf3318;
        border: 2px solid #000;
        position: absolute;
        top: 165px;
        left: 225px;
    }
    .face .line{
        width: 3px;
        height: 160px;
        background: #000;
        position: absolute;
        top: 218px;
        left: 248px;
    }
    .face .mouth{
        width: 280px;
        height: 280px;
        border-radius: 50%;
        border-bottom: 5px solid #000;
        position: absolute;
        top: 98px;
        left: 105px;
    }
    .face .beard .all{
        width: 80px;
        height: 2px;
        background: #000;
        position: absolute;
        z-index: 2;
    }
    .face .beard .left{
        left: 115px;
    }
    .face .beard .right{
        left: 295px;
    }
    .face .beard .top , .face .beard .one{
        top:220px ;
    }
    .face .beard .center , .face .beard .two{
        top: 240px;
    }
    .face .beard .bottom , .face .beard .thr{
        top:260px ;
    }
    .face .beard .top , .face .beard .thr{
        transform: rotate(160deg);
    }
    .face .beard .bottom , .face .beard .one{
        transform: rotate(200deg);
    }
    .neck {
        width: 300px;
        height: 30px;
        background-color: #a31f12;
        border: 2px solid black;
        border-radius: 15px;
        position: relative;
        top: -30px;;
        left: 250px;
        z-index: 4;
    }
    .neck .bell {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border: 2px solid black;
        border-radius: 60px;
        background-color: #cfcb3c;
        position: absolute;
        top: 5px;
        left: 120px;
    }
    .bell .Bline {
        width: 60px;
        height: 2px;
        background-color: #cfcb3c;
        border: 2px solid black;
        border-radius: 3px 3px 0 0;
        position: absolute;
        top: 15px;
    }
    .bell .Bcircle {
        width: 20px;
        height: 16px;
        background: black;
        border-radius: 8px;
        position: absolute;
        top: 25px;
        left: 20px;
    }
    .bell .Bunderpart {
        width: 3px;
        height: 20px;
        background-color: black;
        position: absolute;
        left: 28px;
        top: 40px;
    }
    .body {
        position: relative;
        top: -300px;
        z-index: 1;
    }
    .body .tummy {
        width: 280px;
        height: 240px;
        background-color: #00b1e1;
        border: 2px solid black;
        position: absolute;
        top: 267px;
        left: 260px;
    }
    .body .bellyband {
        width: 220px;
        height: 220px;
        background-color: #fff;
        border: 2px solid black;
        border-radius: 110px;
        position: absolute;
        left: 290px;
        top: 267px;
    }
    .body .pocket {
        width: 160px;
        height: 160px;
        border-radius: 80px;
        background-color: #fff;
        border: 2px solid black;
        position: absolute;
        top: 305px;
        left: 320px;
    }
    .cover {
        width: 164px;
        height: 80px;
        background-color: #fff;
        border-bottom: 2px solid black;
        /*border: 5px solid orange;*/
        position: absolute;
        top: 300px;
        left: 320px;
    }
    .left_hand,.right_hand {
        height: 100px;
        width: 100px;
        position: absolute;
        top: 272px;
        left: 248px;
    }
    .left_hand {
        left: -10px;
    }
    .left_hand .Larm {
        width: 70px;
        height: 100px;
        background-color: #00bee8;
        border: 1px solid black;
        position: relative;
        top: 200px;
        left: 535px;
        transform: rotateZ(135deg);

    }
    .right_hand {
        left: -10px;
    }
    .right_hand .Rarm {
        width: 70px;
        height: 100px;
        background-color: #00bee8;
        border: 1px solid black;
        position: relative;
        top: 200px;
        left: 215px;
        transform: rotateZ(45deg);
    }
    .left_hand .Lpalm,.right_hand .Rpalm {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        border: 2px solid black;
        background-color: #fff;
        position: absolute;
    }
    .right_hand .Rpalm {
        left: 580px;
        top: 260px;
        z-index: 1;
    }
    .left_hand .Lpalm {
        left: 160px;
        top: 260px;
        z-index: 1;
    }
    .foot .left_foot,.foot .right_foot {
        width: 150px;
        height: 40px;
        background-color: #fff;
        border: 2px solid black;
        border-radius: 80px 60px 60px 40px;
        position: relative;
    }
    .foot .left_foot {
        left: 240px;
        top: 210px;
    }
    .foot .right_foot {
        top: 165px;
        left: 410px;
    }
    .foot .crotch {
        width: 40px;
        height: 20px;
        background-color: #fff;
        border: 2px solid black;
        border-bottom: none;
        border-radius: 40px 40px 0 0;
        position: relative;
        top: 103px;
        left: 382px;
        z-index: 2
    }
</style>
<body>
<div class="wrap">
    <!-- 头 -->
    <header>
        <!-- 眼 -->
        <div class="eyes">
            <!-- 左眼 -->
            <div class="eyeLeft">
                <!-- 左眼球 -->
                <div class="eyeBallL"></div>
            </div>
            <!-- 右眼 -->
            <div class="eyeRight">
                <!-- 右眼球-->
                <div class="eyeBallR"></div>
            </div>
        </div>
        <!-- 脸 -->
        <div class="face">
            <!-- 脸型白色 -->
            <div class="white"></div>
            <!-- 鼻 -->
            <div class="nose"></div>
            <!-- 鼻梁 -->
            <div class="line"></div>
            <!-- 嘴 -->
            <div class="mouth"></div>
            <!-- 胡须 -->
            <div class="beard">
                <!--左胡须-->
                <div class="one left all"></div>
                <div class="two left all"></div>
                <div class="thr left all"></div>
                <!--右胡须-->
                <div class="top right all"></div>
                <div class="center right all"></div>
                <div class="bottom right all"></div>
            </div>
        </div>
    </header>
    <!-- 脖子 -->
    <div class="neck">
        <!-- 铃铛 -->
        <div class="bell">
            <div class="Bline"></div>
            <div class="Bcircle"></div>
            <div class="Bunderpart"></div>
        </div>
    </div>
    <!-- 身体 -->
    <div class="body">
        <!-- 肚子 -->
        <div class="tummy"></div>
        <!-- 肚兜 -->
        <div class="bellyband"></div>
        <!-- 口袋 -->
        <div class="pocket"></div>
        <div class="cover"></div>
    </div>
    <!-- 左手 -->
    <div class="left_hand">
        <!-- 手臂 -->
        <div class="Larm"></div>
        <!-- 手掌 -->
        <div class="Lpalm"></div>
    </div>
    <!-- 右手 -->
    <div class="right_hand">
        <!-- 手臂 -->
        <div class="Rarm"></div>
        <!-- 手掌 -->
        <div class="Rpalm"></div>
    </div>
    <!-- 脚 -->
    <div class="foot">
        <!-- 左脚 -->
        <div class="left_foot"></div>
        <!-- 右脚 -->
        <div class="right_foot"></div>
        <div class="crotch"></div>
    </div>
</div>
</div>
</body>
</html>